<template>
  <div class="PartialIntroduction" style="padding: 40px;">
    <div id="pieChart"></div>
  </div>
</template>

<script>
import HighCharts from 'highcharts'
import exporting from 'highcharts/modules/exporting'
import sankey from 'highcharts/modules/sankey'
import oldie from 'highcharts/modules/oldie'
import highcharts3D from 'highcharts/highcharts-3d'

exporting(HighCharts)
sankey(HighCharts)
oldie(HighCharts)
highcharts3D(HighCharts)

export default {
  data(){
    return{
      id:'pieChart',
    }
  },
  mounted() {
    this.initData()
  },
  methods:{
    initData(){
      const pieChartOption = {
        chart: {
          type: 'pie',
          options3d: {
            enabled: true,
            alpha: 45
          }
        },
        title: {
          text: '简数科技每周水果消耗量'
        },
        subtitle: {
          text: 'Highcharts 中的3D环形图'
        },
        plotOptions: {
          pie: {
            innerSize: 100,
            depth: 45
          }
        },
        series: [{
          name: '货物金额',
          data: [
            ['香蕉', 8],
            ['猕猴桃', 3],
            ['桃子', 1],
            ['橘子', 6],
            ['苹果', 8],
            ['梨', 4],
            ['柑橘', 4],
            ['橙子', 1],
            ['葡萄 (串)', 1]
          ]
        }]
      }
      HighCharts.chart(this.id,pieChartOption)
    }
  }
}
</script>
<style lang="">

</style>
